<template>
  <view
      class="bi-order-card" @click="handleClick">
    <view class="bi-order-card__body">
      <view class="bi-order-card__fields">
        <view class="bi-order-card__demand">
          <template v-if="data.orderStatus === 1">
            <view >
              {{ $t('vehicle_arrived_warehouse') }}
            </view>
          </template>
          <template v-if="data.orderStatus ===2">
            <view>
              {{ $t('loading_cargo') }}
            </view>
          </template>
          <template v-if="data.orderStatus ===3">
            <view>
              {{ $t('loading_completed') }}
            </view>
          </template>
          <template v-if="data.orderStatus ===4">
            <view>
              {{ $t('already_departed') }}
            </view>
          </template>

          <template v-if="data.orderStatus ===5">
            <view>
              {{ $t('partially_delivered') }}
            </view>
          </template>
          <template v-if="data.orderStatus ===6">
            <view class="bi-order-card__field--completed">
              {{ $t('order_delivered') }}
            </view>
          </template>
          <template v-if="data.orderStatus ===7">
            <view>
              {{ $t('order_cancelled') }}
            </view>
          </template>
        </view>

        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">{{ $t('license_plate') }}</text>
          <text class="bi-order-card__field-target">{{ data.vehicleNumber ||  ''}}    <text style="color: green;font-weight:bold">{{'  '+ (data.vehicleType==1?"DYNA" : data.vehicleType==2?"LORRY" : data.vehicleType===3?"TRAILER" : "")}}</text></text>
        </view>
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">{{ $t('report_time') }}</text>
          <text class="bi-order-card__field-target">
            {{ sub5Hours(data.createTime) || ''}}
          </text>
        </view>

        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">{{ $t('reporter') }}</text>
          <text class="bi-order-card__field-target">
            {{ data.createUserName || ''}}
          </text>
        </view>
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">{{ $t('driver_phone') }}</text>
          <text class="bi-order-card__field-target">
            {{ data.driverTelephone || '' }}
          </text>
        </view>

        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">{{ $t('pod_count') }}</text>
          <text class="bi-order-card__field-target">{{ data.orderCount || ''}}</text>
        </view>


        <view class="bi-order-card__field" v-if="data.orderStatus ===6">
          <text class="bi-order-card__field-label">{{ $t('completed_by') }}</text>
          <text class="bi-order-card__field-target">
            {{ data.completeUserName || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="data.orderStatus ===6">
          <text class="bi-order-card__field-label">{{ $t('arrive-setup-calculateDuration') }}</text>
          <text class="bi-order-card__field-target">
            {{  calculateDuration(data.vehicleArriveTime,data.vehicleSetupTime)}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="data.orderStatus ===6">
          <text class="bi-order-card__field-label">{{ $t('setup-complete-calculateDuration') }}</text>
          <text class="bi-order-card__field-target">
            {{  calculateDuration(data.vehicleSetupTime,data.completeTime)}}
          </text>
        </view>
        <view class="bi-order-card__field bi-order-card__field--completed" v-if="data.orderStatus ===6">
          <text class="bi-order-card__field-label">{{ $t('completion_time') }}</text>
          <text class="bi-order-card__field-target">
            {{  sub5Hours(data.completeTime) || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="data.orderStatus === 7">
          <text class="bi-order-card__field-label">{{ $t('deleted_by') }}</text>
          <text class="bi-order-card__field-target">{{ data.deleteUserName || ''}}</text>
        </view>
        <view class="bi-order-card__field bi-order-card__field--danger" v-if="data.orderStatus ===7">
          <text class="bi-order-card__field-label">{{ $t('deletion_time') }}</text>
          <text class="bi-order-card__field-target">{{ sub5Hours(data.deleteTime) || ''}}</text>
        </view>
        <view class="bi-order-card__field" v-if="(data.orderStatus===4 || data.orderStatus===5) && data.unPodCount>0">
          <text class="bi-order-card__field-label-unpod">{{ $t('unuploaded_pod_count') }} {{ data.unPodCount || 0}}</text>
        </view>
        <view class="bi-order-card__field" v-if="data.orderStatus ===6 && data.unReceiveCount>0">
          <text class="bi-order-card__field-label-unreceive">{{ $t('unreceived_pod_count') }} {{ data.unReceiveCount || 0}}</text>
        </view>
      </view>
      <view class="bi-order-card__toolbar" v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { sub5Hours,calculateDuration} from '@/apis/order.js';

export default {
  name: 'BiOrderCard',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    currentTimeType: {
      type: Number,
      default:null
    }
  },
  methods: {
    calculateDuration(time1,time2){
      return calculateDuration(time1,time2)
    },
    sub5Hours(currentTime){
      return sub5Hours(currentTime)
    },
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="less">
// 样式部分保持不变
.bi-order-card {
  margin: 16px;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  line-height: 1.7em;
  text.is-light {
    color: #f47554;
  }
  &.is-progress {
  }
  box-shadow: 5rpx 5rpx 8rpx #bfbfbf;
}
.bi-order-card__demand {
  font-size: 28rpx;
  font-weight: bold;
  color: #f47554;
  text-align: right; /* 添加这行 */
  margin-bottom: 10rpx; /* 可选：增加一点底部间距 */
}
.bi-order-card__company {
  font-size: 16px;
  font-weight: bold;
  float: right;

}
.bi-order-card__linkman {
  font-size: 12px;
  color: #666;
}
.bi-order-card__head {
  border-bottom: 1px solid #e3e5e5;
  padding-bottom: 41rpx;
  margin-bottom: 41rpx;
}
.bi-order-card__field {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; // 上下对齐
  margin: 6px 0;
  border-bottom: 1rpx solid #e3e5e5;
}
.bi-order-card__field-label {
  font-weight: medium;
  font-size: 28rpx;
  color: #333; // 深色字体更清晰
  display: inline-block;
  min-width: 140rpx; // 固定宽度，对齐更好看
  vertical-align: top;
}
.bi-order-card__field-label-unpod {
  font-weight: normal;
  color: #ffc107; // Bootstrap warning ye

}
.bi-order-card__field-label-unreceive {
  font-weight: normal;
  color: red; // Bootstrap warning ye

}

.bi-order-card__toolbar {
  padding: 4px 0;
}
.bi-order-card__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.bi-order-card__addon {
  padding-bottom: 3px;
}
.bi-order-card__notfilled {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 4px;
}
.bi-order-card__notfilled-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: -1px;
}
.bi-order-card__notfilled-text {
  color: #f00;
}
.bi-order-card__field-target {
  word-wrap: break-word;
  width: auto;
  display: inline-block;
  font-size: 26rpx;
  color: #555; // 稍微浅一点的颜色，区分主次信息
  text-align: right;
  vertical-align: top;
  max-width: 400rpx; // 控制最大宽度防止溢出
  white-space: normal; // 允许换行
}
.bi-order-card__field--danger .bi-order-card__field-label,
.bi-order-card__field--danger .bi-order-card__field-target {
  color: #dc3545;
}
.bi-order-card__field--completed .bi-order-card__field-label,
.bi-order-card__field--completed .bi-order-card__field-target {
  color: #28a745;
  font-weight: bold;
}
</style>
